<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>少女心待办事项列表</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #ffe6f2; /* 粉色系背景色，体现少女心 */
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh; /* 让内容垂直居中 */
      }

      h1 {
        text-align: center;
        color: #ff69b4; /* 粉色标题，更具少女心 */
        font-size: 30px;
        margin-bottom: 20px;
      }

      input {
        padding: 10px;
        border: 1px solid #ffb6c1; /* 淡粉色边框 */
        border-radius: 20px; /* 圆润的边框 */
        margin-right: 10px;
        width: 300px;
        box-shadow: 0 0 5px rgba(255, 105, 180, 0.3); /* 粉色阴影 */
      }

      button {
        padding: 10px 20px;
        background-color: #ff69b4; /* 粉色按钮 */
        color: white;
        border: none;
        border-radius: 20px; /* 圆润的边框 */
        cursor: pointer;
        transition: background-color 0.3s ease; /* 过渡效果，增加交互感 */
      }

      button:hover {
        background-color: #ff1493; /* 加深的粉色，鼠标悬停效果 */
      }

      ul {
        list-style-type: none;
        padding: 0;
        margin: 20px auto;
        width: 400px;
        background-color: white;
        border-radius: 15px; /* 圆润的边框 */
        box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3); /* 粉色阴影 */
        position: relative;
      }

      li {
        padding: 15px;
        border-bottom: 1px solid #ffb6c1; /* 淡粉色分割线 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
      }

      li:last-child {
        border-bottom: none;
      }

      .delete-button {
        background-color: transparent;
        border: none;
        color: #ff69b4; /* 粉色删除按钮 */
        cursor: pointer;
        font-size: 18px;
        transition: color 0.3s ease; /* 过渡效果，增加交互感 */
      }

      .delete-button:hover {
        color: #ff1493; /* 加深的粉色，鼠标悬停效果 */
      }

      .heart-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        fill: #ff69b4; /* 粉色爱心图标 */
      }
    </style>
  </head>

  <body>
    <h1>待办事项列表💕</h1>
    <input type="text" id="newTodoInput" placeholder="输入新的待办事项" />
    <button id="addTodoButton">添加事项</button>
    <ul id="todoList"></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
      $(document).ready(function () {
        // 为添加按钮添加点击事件监听器
        $('#addTodoButton').click(function () {
          addTodo()
        })

        // 监听回车键事件
        $('#newTodoInput').keyup(function (event) {
          if (event.key === 'Enter') {
            addTodo()
          }
        })

        function addTodo() {
          var todoText = $.trim($('#newTodoInput').val())
          if (todoText !== '') {
            var listItem = $('<li></li>')
            listItem.text(todoText)
            var deleteButton = $('<button class="delete-button">×</button>')
            listItem.append(deleteButton)
            // 添加爱心图标元素，增加少女心元素
            var heartIcon = $(
              '<svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
            )
            listItem.prepend(heartIcon)
            $('#todoList').append(listItem)
            deleteButton.click(function () {
              if (confirm('你确定要删除此待办事项吗？')) {
                listItem.remove()
              }
            })
            listItem.dblclick(function () {
              if (confirm('你确定要删除此待办事项吗？')) {
                listItem.remove()
              }
            })
            $('#newTodoInput').val('')
          }
        }
      })
    </script>
  </body>
</html>
